<template>
  <div id="cesiumContainer"></div>
  <div id="menu">
    <select id="dropDown" ref="dropDownDom" @change="edit">
      <option value="edit0">请选择</option>
      <option value="edit1">虚线</option>
      <option value="edit2">添加颜色</option>
      <option value="edit3">添加条纹</option>
      <option value="edit4">箭头线</option>
      <option value="edit5">添加拉伸</option>
      <option value="edit6">添加贴图</option>
      <option value="edit7">显示与隐藏</option>
      <option value="edit8">移除单个实体</option>
      <option value="edit9">移除所有实体</option>
    </select>
  </div>
</template>

<script setup>
import * as Cesium from 'cesium';
import {onMounted} from "vue";


let viewer = null;
let addLineEntity = null;
53

onMounted(async () => {
  await initViewer();
  buildAddLineEntity();
  viewer.zoomTo(viewer.entities)
})
const initViewer = async () => {
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0NTI3OGI2Ni05YmJhLTRlMTYtYjdiNC1hM2E5ZjI1MGYxZmIiLCJpZCI6MTQ0NTcxLCJpYXQiOjE3MDMxNTQ2MzZ9.-ab5sCTIXoyCUMMGv35NQBbR0h7pxsxu78D3AfCVTek'
  const customImageryProvider = new Cesium.ArcGisMapServerImageryProvider({
    url: '//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
  })
  const mapboxImageryProvider = new Cesium.UrlTemplateImageryProvider({
    url: 'https://a.tiles.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94ZGV2dXNlcjUyMCIsImEiOiJjbHFrb2w3M2IyNHB2MnFtZWx1ZzFjNHZmIn0.CMoLsalSeXlJiLBNyUK1nA'
  })
  var url = 'http://localhost:8081/geoserver/nurc/wms'; //Geoserver URL
  // Cesium之Viewer初始常用配置
  viewer = new Cesium.Viewer('cesiumContainer', {
    shadows: false, // 阴影
    animation: false, // 左下角控制动画
    baseLayerPicker: false, // 右上角图层选择器
    fullscreenButton: false, // 全屏
    geocoder: false, // 右上角搜素
    homeButton: false, // 主页
    infoBox: false, // 信息框
    scene3DOnly: true, // 仅仅显示3D，可以隐藏右上角2D和3D按钮
    selectionIndicator: false, // 绿色选择框
    timeline: false, // 最下面时间轴
    navigationHelpButton: true, // 右上角帮助按钮
    navigationInstructionsInitiallyVisible: true, // 导航指令
    useDefaultRenderLoop: true,
    showRenderLoopErrors: true,
    projectionPicker: false, // 投影选择器
    terrainProvider: await Cesium.createWorldTerrainAsync(), // 地形
    // imageryProvider:  wmsImageryProvider // 影像图
  });
  viewer.scene.globe.depthTestAgainstTerrain = true; // 开启地形深度检测
  // 取消双击时间
  viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
  viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏cesium icon
  // document.querySelector('.cesium-infoBox-camera').style.display = 'none';//隐藏infobox camera
  // 加载离线地图服务 - web服务影像提供器来实例化影像图层
  const imageryLayers = viewer.imageryLayers;
  const scene = viewer.scene;
  const provider = new Cesium.WebMapServiceImageryProvider({

    url: "http://localhost:8086/geoserver/ne/wms",
    layers: "ne:world",
    parameters: {
      format: "image/png",
      transparent: true,
      srs: "EPSG:4326"
    },
  });
  // imageryLayers.addImageryProvider(provider);
}
const buildAddLineEntity = () => {
  // addLine这边仅仅是构造addLineEntity的构造参数
  let addLine = {
    id: 'Line',
    name: '线',
    show: true, // 是否显示
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray([
        118, 30,
        119, 32,
        116, 35
      ]), // 所在位置
      width: 20, // 线条宽度
      material: Cesium.Color.RED,
      clampToGround: true, // 贴地
    }
  }
  addLineEntity = viewer.entities.add(addLine)
}
const changeEntityColorByRightClick = () => {
  const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
  const canvas = viewer.scene.canvas;
  const ellipsoid = viewer.scene.globe.ellipsoid;
  handler.setInputAction(function (click) {
    // 禁止浏览器鼠标右键菜单
    document.oncontextmenu = function () {
      return false;
    };
    let pickModel = viewer.scene.pick(click.position);
    let position = viewer.scene.pickPosition(click.position);
    if (pickModel) {
      console.log('pickModel.id:: ', pickModel.id)
      if (pickModel.id) {
        console.log('pickModel.id.polyline.material.color::: ', pickModel.id.polyline.material.color)
        //entities  添加模型变色
        pickModel.id.polyline.material = new Cesium.PolylineDashMaterialProperty({
          color: Cesium.Color.BLUE
        })
      } else {
        //primitive  添加模型变色
        pickModel.primitive.color = new Cesium.Color(1.0, 0, 0, 1.0);
      }
    }
  }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
}
const edit = () => {
  let dropDownDomTemp = document.getElementById('dropDown')
  console.log('dropDownDomTemp.value::: ', dropDownDomTemp.value)
  switch (dropDownDomTemp.value) {
    case 'edit1':
      addLineEntity.polyline.material = new Cesium.PolylineDashMaterialProperty({
        color: Cesium.Color.BLUE
      })
      break;
    case 'edit2':
      addLineEntity.polyline.material.color = Cesium.Color.CHOCOLATE
      break;
    case 'edit3':
      addLineEntity.polyline.material = new Cesium.StripeMaterialProperty({
        orientation: Cesium.StripeOrientation.VERTICAL,
        evenColor: Cesium.Color.RED,
        oddColor: Cesium.Color.BLUE,
        repeat: 16,
      })
      break;
    case 'edit4':
      addLineEntity.polyline.material = new Cesium.PolylineArrowMaterialProperty(Cesium.Color.CYAN);
      break;
    case 'edit5':
      addLineEntity.polyline.extrudedHeight = 5000;
      break;
    case 'edit6':
      addLineEntity.polyline.material = '/images/test.jpg'
      break;
    case 'edit7':
      console.log('addLineEntity.show::: ', addLineEntity.show)
      addLineEntity.show = !addLineEntity.show;
      break;
    case 'edit8':
      viewer.entities.removeById(addLineEntity.id); // 第一种方式： 常用根据实体的id移除指定实体
      // viewer.entities.remove(addLineEntity); // 第二种方式：直接移除指定的实体
      break;
    case 'edit9':
      viewer.entities.removeAll();
      break;
  }
}
</script>


<style>
html,
body,
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#menu {
  z-index: 999;
  position: absolute;
  top: 20px;
  left: 20px;
}

.toolbar {
  position: absolute;
  top: 10px;
  left: 20px;
  background-color: rgb(0, 0, 0, 0);
}
</style>
